<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3drotate  x，y，z轴旋转</title>
    <style>
        body {
            /* 想要实现3d效果必须有透视属性 值一般固定 不必纠结数值多少 */
            perspective: 500px;
        }
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
          
           
        }
        img:hover {
            /* 1：x轴左手法则 */
            /* transform: rotatex(45deg) */
            /* 2：y轴左手法则 */
            /* transform: rotatey(45deg); */
            /* 3：z轴 旋转类似抽奖转盘 平面旋转 */
            /* transform: rotatez(45deg); */
            /* 自定义写法 */
            /* transform: rotate3d(x，y，z，deg); */
                        /*1： x轴旋转45度 */
            /* transform: rotate3d(1,0,0,45deg); */
                    /*:2：y轴旋转45度 */
            /* transform: rotate3d(0,1,0,45deg); */
                       /*:3：z轴旋转45度 */
            /* transform: rotate3d(0,0,1,45deg); */
                      /*:4：同时拥有x y 轴 多个轴  就会矢量 对角线 旋转  */
            transform: rotate3d(1,1,0,45deg);


           


            

        }
    </style>
</head>
<body>
    <img src="../images/pig.jpg" alt="">
</body>
</html>